<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="" lay-filter="form-filter">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label required">ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-block">
                    <input type="hidden" name="parentId" lay-filter="input-parentId-filter" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="radio-type-filter">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label required">菜单图标</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label required">排序号</label>
                <div class="layui-input-inline">
                    <input type="number" name="sort" lay-verify="required" value="0" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="permission" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">页面链接</label>
                <div class="layui-input-block">
                    <input type="text" name="path" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" title="开启|关闭" lay-skin="switch" checked>
                </div>
            </div>

        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'vtlForm', 'iconPicker', 'zTree'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let vtlForm = layui.vtlForm;
        let iconPicker = layui.iconPicker;
        let zTree = layui.zTree;
        let url = layui.url();
        let id = url.search.id;

        let parentSelect;

        form.on('radio(radio-type-filter)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            window.setVisibleByMenuType(elem.value);
        });

        form.on('submit(submit-filter)', function(data) {
            if(data.field.icon && data.field.icon.indexOf('layui-icon ') == -1) {
                data.field.icon = 'layui-icon ' + data.field.icon;
            }
            //状态处理
            let statusInput =  $('form input:checkbox[name=status]');
            data.field.status = statusInput.is(':checked') ? 0 : 1;
            //父菜单处理
            let parentSelectValue = parentSelect.getValue();
            let parentId = 0;
            if(!$.vtl.isBlank(parentSelectValue)){
                parentId = JSON.stringify(parentSelectValue[0].id)
            }
            data.field.parentId = parentId;
            $.post('/system/menu/create', JSON.stringify(data.field), function(result) {
                if (result.code == 0) {
                    $.vtl.closeLayer();
                    parent.refresh();
                }
            });

            return false;
        });

        window.initIconPicker = function() {
            iconPicker.render({
                elem: '#iconPicker',
                type: 'fontClass',
                search: true,
                page: false,
                limit: 16,
                click: function(data) {
                   //console.log(data);
                },
                success: function(d) {
                    //console.log(d);
                }
            });
        }

        window.setVisibleByMenuType = function() {
            let type = $('form input:radio[name=type]:checked').val();

            let $icon = $('form input:text[name=icon]');
            let $permission = $('form input:text[name=permission]');
            let $path = $('form input:text[name=path]');
            switch (type) {
                  case '1':
                      $icon.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $permission.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $path.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      break;
                  case '2':
                      $icon.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $permission.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $path.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      break;
                  case '3':
                      $icon.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $permission.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $path.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      break;
                  default:
                      $icon.attr('lay-verify', 'required').parents('div .layui-form-item').show();
                      $permission.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      $path.removeAttr('lay-verify').parents('div .layui-form-item').hide();
                      break;
                }
        }

        window.initParentIdSelector = function() {
            let data = [];
            $.sync('get', '/system/menu/simple-list', function(result){
                data = $.vtl.tree(result.data, 0);
            });

            let config = { data: data, radio: true, clickClose: true, tree: { show: true, expandedKeys: false }};
            parentSelect = vtlForm.initXmSelect('form input:hidden[name=parentId]', config);
        }

        window.init = function(id) {
            vtlForm.initRadioByDict('form input:radio[name=type]', 'system_menu_type');
            window.initParentIdSelector();
            if(id) {
                parentSelect.setValue([id])
            }
            window.setVisibleByMenuType();
            window.initIconPicker();

        }

        window.init(id);
    })
</script>
</body>
</html>
